<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet"/>
 <link href="css/select2.css" rel="stylesheet"/>
<style>
.bs-callout + .bs-callout {
    margin-top: -5px;
}
.bs-callout-danger {
    border-left-color: #D9534F;
}
.bs-callout {
    padding: 20px;
    margin: 20px 0px;
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: #EEE;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-radius: 3px; 
    border-left-color:#D9534F;
}
</style>
<title>申请会议</title>
</head>

<body style="background-color: rgba(187, 179, 179, 0.38);" onload="loadMessageCount()">
<div class="container">
  <jsp:include page="header.jsp"/>

<h1 class="col-sm-12" style="font-family:迷你简菱心;">会议管理系统</h1>
<br><br><br>
<div class="col-sm-2">
			<div data-spy="affix" data-offset-top="160" data-offset-bottom="100">
				<ul class="nav nav-pills nav-stacked">
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#"> 我的会议<span class="caret"></span> </a>
						<ul class="dropdown-menu">
							<li><a href="myMeetingInfo.action#future7">未来7天内的会议</a></li>
							<li><a href="myMeetingInfo.action#myOrder">我预约的会议</a></li>
							<li><a href="myMeetingInfo.action#ended">已结束的会议</a></li>
							<li><a href="myMeetingInfo.action#cancel">已取消的会议</a></li>
						</ul>
					</li>

					<li class="dropdown active"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#"> 申请会议<span class="caret"></span>
					</a>
						<ul class="dropdown-menu">
							<li><a href="applyByTimeAndNumber.jsp">通过时间和容量</a>
							</li>
							<li><a href="applyMeetingByAddress.action">通过地点</a>
							</li>
						</ul>
					</li>
					<li><a href="personalInfo.action">
							个人信息</a>
					</li>
					<li><a href="getInvitationInfo.action">
							<span class="badge pull-right" id="mCount"></span>消息</a>
					</li>

				<c:if test="${sessionScope.adminFlag == '1'}">
						<li><a type="button" data-toggle="collapse" data-target="#admin">管理功能</a></li>
						</c:if>
				</ul>
			<div id="admin"  class="collapse">
					<ul class="nav nav-pills nav-stacked">
						<li><a href="getPersonAction.action">人员管理</a>
						</li>
						<li><a href="GetMeetingRoomAction.action"><span
								class="badge pull-right"></span>会议室管理</a>
						</li>
						<li><a href="getDeviceAction.action"><span
								class="badge pull-right"></span>设备管理</a>
						</li>
						<li><a href="getDepartmentAction.action"><span
								class="badge pull-right"></span>部门管理</a>
						</li>
						<li><a href="GetMeetingAction.action"><span
								class="badge pull-right"></span>会议管理</a>
						</li>
					</ul>
				</div>
				<!-- 管理界面 -->


			</div>
			<!--  -->
		</div>
  <div class="col-sm-8">
  <ol class="breadcrumb">
  <li><a href="#">主页</a></li>
  <li><a href="#">申请会议</a></li>
  <li class="active">通过时间和容量</li>
</ol>

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">填写申请信息</h3>
  </div>
  <div class="panel-body">
  <div class="alert alert-warning" role="alert">请先输入容量和时间，再进行地点的选择。</div>
  
 <div class="alert alert-danger" style="display: none"  id="errorShow">
  <button type="button" class="close" data-dismiss="alert" onclick="closeDiv()"><span >&times;</span><span class="sr-only">Close</span></button>
  <strong>提示！</strong>请填入正确完整的信息！
 </div>
 <c:if test="${!empty isLegalFlag}">
  <div class="alert alert-danger">
  <button type="button" class="close" data-dismiss="alert"><span >&times;</span><span class="sr-only">Close</span></button>
  <strong>提示！</strong>该时间段已经有人占用！
 </div>
 </c:if>
 
 <form class="form-horizontal" method="post" id="applyForm" action="applyMeeting.action">
<div class="col-sm-4">

  <div class="input-group" id="capacityDiv">
 <span class="glyphicon glyphicon-user input-group-addon"></span>
  <input type="text" class="form-control" id="capacity" name="capacity" placeholder="容纳人数" maxlength="4" onkeypress="return IsNum(event)" oninput="validateCap()">
</div>
<br>




  <div class="input-group" id="startTimeDiv">
                <div class='input-group date' id="datetimepicker1">
                    <input type='text' class="form-control" placeholder="开始时间" id="startTime" name="startTime" readonly />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <br>
            <div class="input-group" id="endTimeDiv">
                <div class='input-group date' id="datetimepicker2">
                    <input type="text" class="form-control" placeholder="结束时间"   id="endTime" name="endTime"  readonly />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <br>
          <select id="local" class="has-error" name="meetingRoomID"style="width:200px;" name="local" disabled>
		</select>
<br>
<br>

<select id="selectDevice" style="width:200px;" name="devices" multiple disabled>

</select>

<br>
<br>
<div  id="topicDiv">
  <input type="text" class="form-control"  style="width:163px;display: inline;margin-right: 5px;" id="topic" name="topic" placeholder="主题" oninput="validateTopic()" readonly>
<label class="control-label" for="nameInput"  style="color: #A94442" id="topicInfo" >必填</label>
</div>

<br>
<div id="contentDiv">
<textarea style="width:203px;height:94px;" class="form-control" rows="4" id="content" name="content" placeholder="请输入会议内容" oninput="validateContent()" readonly></textarea>
    </div>
    </div>
    

  <div class="well col-sm-8" style="margin-bottom: 7px;margin-left:25px;width:400px">
  <fieldset>
  <legend style="font-family:微软雅黑;font-size:20px;" >查看结果</legend>
  <div class="bs-callout bs-callout-danger">
    <h4>当前时间段剩余空闲设备数量</h4>
    <p id="deviceCount"></p>
  </div>
  <legend style="font-family:微软雅黑;font-size:20px;" >提示</legend>
  <div class="bs-callout bs-callout-danger">
  <div id="tips"></div>
  </div>
  </fieldset>
  </div>

  
  
  
  </form>
    
  </div>
  <div class="panel-footer">     
  <button type="button" class="btn btn-info" style="margin-left: 600px;" onclick="validateSubmit()">确定提交</button>
  </div>
</div>
</div>
</div>
       
</body>
 <script src="js/jquery-2.0.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/moment.js"></script>
 <script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/select2.js"></script>
<script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({
                	
                });
                
                $('#datetimepicker1').data("DateTimePicker").setMinDate(new Date().getTime()-(24*60*60*1000));
                $('#datetimepicker1').change(
                		function(event){ 
                			var capacity=document.getElementById("capacity");
                			var startTime=document.getElementById("startTime");
                			var endTime=document.getElementById("endTime");
                			var meetingRoomSel=document.getElementById("local");
            				meetingRoomSel.options.length=0;
                			if(capacity.value==""){
                				$("div#capacityDiv").attr("class","input-group has-error");
                				setDisabled(true);
                			}
                			if(startTime.value==""){
                				$("div#startTimeDiv").attr("class","input-group has-error");
                			}
                			if(endTime.value==""){
                				$("div#endTimeDiv").attr("class","input-group has-error");
                			}
                			if(startTime.value!=""&&endTime.value!=""){
                				if($('#datetimepicker2').data("DateTimePicker").getDate() - $('#datetimepicker1').data("DateTimePicker").getDate() <0){
                					$("div#startTimeDiv").attr("class","input-group has-error");
                					$("div#endTimeDiv").attr("class","input-group has-error");
                					setDisabled(true);
                				}
                				else{
                					$("div#startTimeDiv").attr("class","input-group");
                					$("div#endTimeDiv").attr("class","input-group");
                					if(capacity.value!=""){
                						setDisabled(false);
                						syncGetMeetingRoomByTimeAndNumber();
                						syncDeviceByTimeAndNumber();
                						syncDeviceCountByTimeAndNumber();
                					}
                				}
                			}
                			
                			
                		}
                );
                $('#datetimepicker2').datetimepicker();
                $('#datetimepicker2').data("DateTimePicker").setMinDate(new Date().getTime()-(24*60*60*1000));
                $('#datetimepicker2').change(
                		function(event){ 
                			var capacity=document.getElementById("capacity");
                			var startTime=document.getElementById("startTime");
                			var endTime=document.getElementById("endTime");
                			var meetingRoomSel=document.getElementById("local");
            				meetingRoomSel.options.length=0;
                			if(capacity.value==""){
                				$("div#capacityDiv").attr("class","input-group has-error");
                				setDisabled(true);
                			}
                			if(startTime.value==""){
                				$("div#startTimeDiv").attr("class","input-group has-error");
                			}
                			if(endTime.value==""){
                				$("div#endTimeDiv").attr("class","input-group has-error");
                			}
                			if(startTime.value!=""&&endTime.value!=""){
                				if($('#datetimepicker2').data("DateTimePicker").getDate() - $('#datetimepicker1').data("DateTimePicker").getDate() <0){
                					$("div#startTimeDiv").attr("class","input-group has-error");
                					$("div#endTimeDiv").attr("class","input-group has-error");
                					setDisabled(true);
                				}
                				else{
                					$("div#startTimeDiv").attr("class","input-group");
                					$("div#endTimeDiv").attr("class","input-group");
                					if(capacity.value!=""){
                						syncGetMeetingRoomByTimeAndNumber();
                						if($("#tips").html().length<10){
                							
                						}
                						
                					}
                				}
                			}
                			
                			
                		}
				);
                $('#local').select2({
            		placeholder: "选择地点",
            		allowClear: true
            		});
                $('#selectDevice').select2({
            		placeholder: "选择设备(可不填)"
            		});
            });
            
            function validate(){
            	alert("shit");
            }
            
            function IsNum(e) {
                var k = window.event ? e.keyCode : e.which;
                if (((k >= 48) && (k <= 57)) || k == 8 || k == 0) {
                } else {
                    if (window.event) {
                        window.event.returnValue = false;
                    }
                    else {
                        e.preventDefault(); //for firefox 
                    }
                }
            } 
            
            function validateCap(){
            	var capacity=document.getElementById("capacity");
            	var meetingRoomSel=document.getElementById("local");
				meetingRoomSel.options.length=0;
            	if(capacity.value!="") {
            		$("div#capacityDiv").attr("class","input-group");
            		if(startTime.value!=""&&endTime.value!=""&&($('#datetimepicker2').data("DateTimePicker").getDate() - $('#datetimepicker1').data("DateTimePicker").getDate() >0)){
            			setDisabled(false);
					syncGetMeetingRoomByTimeAndNumber();
					syncDeviceByTimeAndNumber();
					syncDeviceCountByTimeAndNumber();
            		}
            	}
            	else{
            		$("div#capacityDiv").attr("class","input-group has-error");
            		setDisabled(true);
            	}
            }
            
            function syncGetMeetingRoomByTimeAndNumber(){
            	meetingRoom_http_request = false;
        		var url="getMeetingRoomByTimeAndNumber.action?"+"capacity="+$("#capacity").val()+"&startTime="+$('#datetimepicker1').data("DateTimePicker").getDate()+"&endTime="+$('#datetimepicker2').data("DateTimePicker").getDate();
        		if(window.XMLHttpRequest){
        			meetingRoom_http_request = new XMLHttpRequest();
        		}
        		else if(window.ActiveXObject){
        			try{
        				meetingRoom_http_request=new ActiveXObject("Msxm12.XMLHTTP");
        			}catch (e){	
        				try{
        					meetingRoom_http_request=new ActiveXObject("Microsoft.XMLHTTP");
        				}catch (e){}
        			}
        		}
        		if(!meetingRoom_http_request){
        			alert("不能创建X对象");
        			return false;
        		}
        		meetingRoom_http_request.onreadystatechange = function(){
        			getResult();
        		};
        		meetingRoom_http_request.open('GET', url, true);
        		meetingRoom_http_request.send(null);
            }
            
            function getResult(){
        		if(meetingRoom_http_request.readyState==4){
        			if(meetingRoom_http_request.status==200){
        				var arr = meetingRoom_http_request.responseText;
        				var jsonss=eval("("+arr+")");
        				var meetingRoomSel=document.getElementById("local");
        				meetingRoomSel.options.length=0;
        				if(jsonss.length==0){
        					var tips=document.getElementById("tips");
        					tips.innerHTML ="<h4>没有空闲的会议室跟选择的时间匹配！</h4><p><code>请重新选择。</code></p>";
        					setDisabled(true);
        					return;
        				}
        				else{
        					for(var i=0;i<jsonss.length;i++){
      						  var  meetingRoom= new Option(jsonss[i].mrName, jsonss[i].mrId);
      						  meetingRoomSel.options.add(meetingRoom);
      						  if(i==0)
      						  $("#local").select2("val", jsonss[i].mrId);
      					}
        				var tips=document.getElementById("tips");
        				tips.innerHTML ="";
      					setDisabled(false);
  						syncDeviceByTimeAndNumber();
  						syncDeviceCountByTimeAndNumber();
        				}
        					
        				
        				}//200
        				
        				}//4
        			
        	}//function
        	
        	
        	function syncDeviceByTimeAndNumber(){
            	http_request = false;
        		var url="getDeviceByTimeAndNumber.action?"+"startTime="+$('#datetimepicker1').data("DateTimePicker").getDate()+"&endTime="+$('#datetimepicker2').data("DateTimePicker").getDate();
        		if(window.XMLHttpRequest){
        			http_request = new XMLHttpRequest();
        		}
        		else if(window.ActiveXObject){
        			try{
        				http_request=new ActiveXObject("Msxm12.XMLHTTP");
        			}catch (e){
        				try{
        				http_request=new ActiveXObject("Microsoft.XMLHTTP");
        				}catch (e){}
        			}
        		}
        		if(!http_request){
        			alert("不能创建X对象");
        			return false;
        		}
        		http_request.onreadystatechange = function(){
        			getDeviceResult();
        		};
        		http_request.open('GET', url, true);
        		http_request.send(null);
            }
            
            function getDeviceResult(){
        		if(http_request.readyState==4){
        			if(http_request.status==200){
        				var arr = http_request.responseText;
        				var jsonss=eval("("+arr+")");
        				var selectDevice=document.getElementById("selectDevice");
        				selectDevice.options.length=0;
        					for(var i=0;i<jsonss.length;i++){
        						  var  device= new Option(jsonss[i].DName+"N"+jsonss[i].DId, jsonss[i].DId);
        						  selectDevice.options.add(device);
        					}
        				
        				}//200
        				
        				}//4
        			
        	}//function
        	
        	
        	function syncDeviceCountByTimeAndNumber(){
            	http_requestDCount = false;
        		var url="getDevicesCountByTimeAndNumber.action?"+"startTime="+$('#datetimepicker1').data("DateTimePicker").getDate()+"&endTime="+$('#datetimepicker2').data("DateTimePicker").getDate();
        		if(window.XMLHttpRequest){
        			http_requestDCount = new XMLHttpRequest();
        		}
        		else if(window.ActiveXObject){
        			try{
        				http_requestDCount=new ActiveXObject("Msxm12.XMLHTTP");
        			}catch (e){
        				try{
        					http_requestDCount=new ActiveXObject("Microsoft.XMLHTTP");
        				}catch (e){}
        			}
        		}
        		if(!http_request){
        			alert("不能创建X对象");
        			return false;
        		}
        		http_requestDCount.onreadystatechange = function(){
        			getDeviceCountResult();
        		};
        		http_requestDCount.open('GET', url, true);
        		http_requestDCount.send(null);
            }
            
            function getDeviceCountResult(){
        		if(http_requestDCount.readyState==4){
        			if(http_requestDCount.status==200){
        				var arr = http_requestDCount.responseText;
        				var jsonss=eval("("+arr+")");
        				var dCount=document.getElementById("deviceCount");
        				dCount.innerHTML="";
        					for(var i=0;i<jsonss.length;i++){
        						  dCount.innerHTML = dCount.innerHTML +jsonss[i].deviceName+"<code>"+jsonss[i].count+"</code>"
        					}
        				
        				}//200
        				
        				}//4
        			
        	}//function
           
        	function validateSubmit(){
        		if($("#local").attr("disabled") == "disabled"){
        			document.getElementById("errorShow").style.display = "block";
        		}
        		else if($("#topic").val() == ""){
        			$("#topicDiv").attr("class","has-error");
        			document.getElementById("errorShow").style.display = "block";
        		}
        		else if($("#content").val() == ""){
        			$("#contentDiv").attr("class","has-error");
        			document.getElementById("errorShow").style.display = "block";
        		}
        		else if($("#topicDiv").attr("class") == "has-error") {
        			document.getElementById("errorShow").style.display = "block";
        			return;
        		}
        		else{
        			var form=document.getElementById("applyForm");
        			form.submit();
        		}
        	}
        	
        	function validateTopic(){
        		if($("#topic").val() != ""){
        			syncCheckTopic($("#topic").val());
        		}
        		else{
        			$("#topicDiv").attr("class","has-error");
        			$("#topicInfo").html("必填");
        			$("#topicInfo").css("color","#A94442");
        		}
        	}
        	
			function validateContent(){
				if($("#content").val() != "")
        			$("#contentDiv").attr("class","input-group");
        		else
        			$("#contentDiv").attr("class","input-group has-error");
        	}
        	function closeDiv(){
        		document.getElementById("errorShow").style.display = "none";
        	}
        	function setDisabled(result){
        		$("#local").prop("disabled", result);
				$("#selectDevice").prop("disabled", result);
				$("#topic").prop("readonly", result);
				$("#content").prop("readonly", result);
        	}
        	
        	
        	function syncCheckTopic(topic){
            	http_requestCheck = false;
        		var url="isTopicExist.action?"+"topic="+encodeURI(encodeURI(topic));
        		if(window.XMLHttpRequest){
        			http_requestCheck = new XMLHttpRequest();
        		}
        		else if(window.ActiveXObject){
        			try{
        				http_requestCheck=new ActiveXObject("Msxm12.XMLHTTP");
        			}catch (e){
        				try{
        					http_requestCheck=new ActiveXObject("Microsoft.XMLHTTP");
        				}catch (e){}
        			}
        		}
        		if(!http_requestCheck){
        			alert("不能创建X对象");
        			return false;
        		}
        		http_requestCheck.onreadystatechange = function(){
        			getCheckResult();
        		};
        		http_requestCheck.open('GET', url, true);
        		http_requestCheck.send(null);
            }
            
            function getCheckResult(){
        		if(http_requestCheck.readyState==4){
        			if(http_requestCheck.status==200){
        				var arr = http_requestCheck.responseText;
        				var jsonss=eval("("+arr+")");
        				if(jsonss[0] == "true"){
        					$("#topicDiv").attr("class","has-error");
                			$("#topicInfo").html("重复");
                			$("#topicInfo").css("color","#A94442");
        				}
        				else{
        					$("#topicDiv").attr("class","");
                			$("#topicInfo").html("<span class='glyphicon glyphicon-ok'></span>");
                			$("#topicInfo").css("color","green");
        				}
        				
        				}//200
        				
        				}//4
        			
        	}//function
        	function loadMessageCount(){
        		loadMessageCount_request = false;
        		var url="getNewMessage.action";
        		if(window.XMLHttpRequest){
        			loadMessageCount_request = new XMLHttpRequest();
        		}
        		else if(window.ActiveXObject){
        			try{
        				loadMessageCount_request=new ActiveXObject("Msxm12.XMLHTTP");
        			}catch (e){
        				try{
        					loadMessageCount_request=new ActiveXObject("Microsoft.XMLHTTP");
        				}catch (e){}
        			}
        		}
        		if(!loadMessageCount_request){
        			alert("不能创建X对象");
        			return false;
        		}
        		loadMessageCount_request.onreadystatechange = function(){
        			loadMes();
        		};
        		loadMessageCount_request.open('GET', url, true);
        		loadMessageCount_request.send(null);
        	}
        	
        	function loadMes(){
        		if(loadMessageCount_request.readyState==4){
        			if(loadMessageCount_request.status==200){
        				var arr = loadMessageCount_request.responseText;
        				var jsonss  =eval("("+arr+")");
        				var mCount=document.getElementById("mCount");
        				if(jsonss[0]!=0) mCount.innerHTML=jsonss[0];
        				}//200
        				
        				}//4
        			
        	}//function
            
        </script>
</html>